<template>
    <div>
        <el-row>
            <el-col :span="2"></el-col>
            <el-col :span="4" align="center"><span class="fw">公司名称</span></el-col>
            <el-col :span="12" align="left">
                <el-input v-model="company.companyName" placeholder="请输入公司名称" clearable></el-input>
            </el-col>
            <el-col :span="4"></el-col>
        </el-row>
        <el-row>
            <el-col :span="2"></el-col>
            <el-col :span="4" align="center"><span class="fw">公司电话</span></el-col>
            <el-col :span="12" align="left">
                <el-input v-model="company.companyPhone" placeholder="请输入公司电话" clearable></el-input>
            </el-col>
            <el-col :span="4"></el-col>
        </el-row>
        <el-row>
            <el-col :span="2"></el-col>
            <el-col :span="4" align="center"><span class="fw">公司视频</span></el-col>
            <el-col :span="12" align="left">
                <el-input v-model="company.companyVideoUrl" :disabled="true"></el-input>
            </el-col>
            <el-col :span="4">
                <el-upload class="avatar-uploader" :http-request="uploadVideoFile" :show-file-list="false" action="http://118.89.154.192:8086/appTokenServer">
                    　　<el-button size="small" type="primary" :disabled="videoLoading" :loading="videoLoading">点击上传</el-button>
                </el-upload>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2"></el-col>
            <el-col :span="4" align="center"><span class="fw">公司详情</span></el-col>
            <el-col :span="16" align="left">
                <el-upload class="avatar-uploader" :http-request="uploadSectionFile" :show-file-list="false" action="http://118.89.154.192:8086/appTokenServer">
                    <el-button id="article-uploader" size="small" type="primary" style="display:none">点击上传</el-button>
                </el-upload>
                <div class="ql-container ql-snow">
                    <quill-editor ref="text" v-model="company.companyDetail"
                     class="ql-editor" :options="editorOption" v-loading="uploadLoading"/>
                </div>
            </el-col>
            <el-col :span="2"></el-col>
        </el-row>
        <el-row>
            <el-col :span="8"></el-col>
            <el-col :span="8">
                <el-button type="primary" @click="submit" :disabled="submitLoading" :loading="submitLoading">提交</el-button>
            </el-col>
            <el-col :span="8"></el-col>
        </el-row>
    </div>
</template>
<script>
let OSS = require('ali-oss');
let client = new OSS({
  region: 'oss-cn-shanghai',
  //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或STS，部署在客户端使用STS。
  accessKeyId: 'LTAIoM90JOn4aEwU',
  accessKeySecret: 'OATKi5mcguNP3O4psil8uEuBT3a7kk',
  bucket: 'maitianyun', 
});

// 工具栏配置
const toolbarOptions = [
    ["bold", "italic", "underline", "strike"],     // 加粗 斜体 下划线 删除线
    ['blockquote', 'code-block'],                  // 引用  代码块
    [{'header': 1}, {'header': 2}],                // 1、2 级标题
    [{'list': 'ordered'}, {'list': 'bullet'}],     // 有序、无序列表
    // [{ script: "sub" }, { script: "super" }],   // 上标/下标
    [{'indent': '-1'}, {'indent': '+1'}],          // 缩进
    [{'direction': 'rtl'}],                        // 文本方向
    [{'size': ['small', false, 'large', 'huge']}], // 字体大小
    [{'header': [1, 2, 3, 4, 5, 6, false]}],       //标题
    [{'color': []}, {'background': []}],           // 字体颜色、字体背景颜色
    [{'font': []}],                                //字体种类                    
    [{'align': []}],                               //对齐方式
    ['image'],                                     // 链接link、图片、视频video
    ['clean']                                      // 清除文本格式
]
let quill;
export default {
    data(){
        return{
            company:{
                companyName:"",
                companyPhone:"",
                companyVideoUrl:"",
                companyDetail :'',
            },
            editorOption: {                
                modules: {
                    toolbar: {
                        container: toolbarOptions,  // 工具栏
                        handlers: {
                            'image': function (value) {
                                if (value) {
                                    // 调用自定义图片上传
                                    //等于点击上传按钮被点击
                                    document.querySelector('#article-uploader').click()
                                } else {
                                    this.quill.format('image', false);
                                }
                            }
                        }
                    }
                }
            },
            submitLoading:false,
            uploadLoading:false,
            videoLoading:false,
        }
    },
    mounted(){
        // 获取富文本组件实例
        quill = this.$refs.text.quill;
        this.requestInfo();
    },
    methods:{
        requestInfo(){
            this.postRequest("/api/background/company_info/company_info").then(resp =>{
                if(resp && resp.status==200){
                    this.company=resp.data.obj;
                }
            })
        },
        timestamp(){
            var time = new Date();
            var y = time.getFullYear();
            var m = time.getMonth()+1;
            var d = time.getDate();
            var h = time.getHours();
            var mm = time.getMinutes();
            var s = time.getSeconds();
            return ""+y+this.add0(m)+this.add0(d)+this.add0(h)+this.add0(mm)+this.add0(s);
        },
        add0(m){
            return m<10?'0'+m : m;
        },
        uploadVideoFile(e){
           var file=e.file;
           console.log(file)
           if((file.name).indexOf("mp4")==-1 && (file.name).indexOf("3gp")==-1 
            && (file.name).indexOf("m3u8")==-1 && (file.name).indexOf("webm")==-1){
               this.common.showToast("warning","只能上传mp4、3gp、m3u8、webm格式的视频")
           }else{
                this.videoLoading=true;
                var value = file.name;
                var suffix = value.substr(value.indexOf("."));
                var storeAs = "image/"+this.timestamp()+suffix;
                console.log(file.name + ' => ' + storeAs);
                client.put(storeAs, file).then(r1 =>{
                    console.log(r1);
                    if(r1.res && r1.res.statusCode==200){
                        // return client.get(storeAs);
                        this.company.companyVideoUrl=r1.url;
                        this.videoLoading=false;
                    }else{
                        this.videoLoading=false;
                        this.common.showToast("warning","上传失败")   
                    }  
                }).then(function (r2) {
                    // console.log(r2);
                }).catch(function (err) {
                    console.error(err);
                    this.videoLoading=false;
                    this.common.showToast("warning","上传失败")
                });       
           }
        },
        uploadSectionFile(e){
           var file=e.file;
           if((file.type).indexOf("image")==-1){
                this.common.showToast("warning","只能上传图片")
           }else{
                this.uploadLoading=true;
                var value = file.name;
                var suffix = value.substr(value.indexOf("."));
                var storeAs = "image/"+this.timestamp()+suffix;
                console.log(file.name + ' => ' + storeAs);
                client.put(storeAs, file).then(r1 =>{
                    console.log(r1);
                    if(r1.res && r1.res.statusCode==200){
                        // return client.get(storeAs);
                        // 获取整个富文本长度
                        let length = quill.getLength();
                        // 获取整个富文本文子长度
                        // let textLength=quill.getText().length;
                        //获取当前所选择的下标
                        let selectIndex=quill.getSelection().index
                        // 插入图片
                        quill.insertEmbed(selectIndex, 'image', r1.url);
                        // 调整光标到最后
                        // quill.setSelection(length +1);
                        this.uploadLoading=false;
                    }else{
                        this.uploadLoading=false;
                        this.common.showToast("warning","上传失败")   
                    }  
                }).then(function (r2) {
                    // console.log(r2);
                }).catch(function (err) {
                    console.error(err);
                    this.uploadLoading=false;
                    this.common.showToast("warning","上传失败")
                });       
           }       
        },
        submit () {
           this.submitLoading=true;
           console.log(this.company)
           this.postRequest("/api/background/company_info/edit_company_info",{
               companyName:this.company.companyName,
               companyPhone:this.company.companyPhone,
               companyVideoUrl:this.company.companyVideoUrl,
               companyDetail:this.company.companyDetail
           }).then(resp =>{
               this.submitLoading=false;
               if(resp && resp.status ==200){
                   this.common.showToast('success','修改成功')
               }
           })
        },
    }
}
</script>
<style scoped>
.el-row {
  margin-bottom: 30px;
  min-height: 50px;
  line-height: 50px;
}
.el-col {
  min-height: 50px;
  line-height: 50px;
}
.el-input{
    width: 70%;
}
.ql-snow.ql-toolbar{
    position: absolute !important;
    background-color: #fff !important;
    z-index: 2 !important;
    top: 0;
}
.ql-editor{
    height: 500px;
    overflow-y: scroll;
}
.ivu-upload {
    display: none;
}
</style>
